<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>商品管理</title>
		<link rel="stylesheet" type="text/css" href="../../../plugin/kindeditor/themes/default/default.css" />
		<link type="text/css" rel="stylesheet" href="../../../css/index.css" />
		<link type="text/css" rel="stylesheet" href="../../../layui/css/layui.css" />
		<link type="text/css" rel="stylesheet" href="../../../css/store/store.css" />
		<link type="text/css" rel="stylesheet" href="../../../css/store/addStore.css" />
	</head>
	<body>
		<header></header>
		<div id="menu"></div>
		<div class="content">
			<div class="content-title">
				<ul class="clearfix">
					<li>商品管理</li>
					<li>添加商品</li>
				</ul>
			</div>
			<div class="content-table">
				<div class="infoBox">
					<div class="baseItem">
						<div class="info-title">基本信息</div>
						<div class="baseForm">
							<form class="layui-form" action="">
								<div class="layui-form-item">
									<label class="layui-form-label"><span style="color:red;">*</span>商品分类：</label>
									<div class="layui-input-block">
										<input type="text" placeholder="选择商品分类" class="layui-input storefl" />
										<ul style="display: none;" class="storeClassify">
											<li>
												<span>服装</span>
												<div class="storeDetail">
													<div>
														<ul class="clearfix clothesClassify">
															<li class="active">男装</li>
															<li>女装</li>
														</ul>
														<ul class="clearfix clothesdetail">
															<li>夹克</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>夹克</li>
															<li>羽绒服</li>
															<li>夹克</li>
															<li>羽绒服</li>
															<li>夹克</li>
															<li>羽绒服</li>
														</ul>
														<ul class="clearfix" style="display: none;">
															<li>夹克</li>
															<li>羽绒服</li>
														</ul>
													</div>
												</div>
											</li>
											<li>
												<span>服装</span>
												<div class="storeDetail">
													<div>
														<ul class="clearfix clothesClassify">
															<li class="active">男装</li>
															<li>女装</li>
														</ul>
														<ul class="clearfix clothesdetail">
															<li>夹克</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>羽绒服</li>
															<li>夹克</li>
															<li>羽绒服</li>
															<li>夹克</li>
															<li>羽绒服</li>
															<li>夹克</li>
															<li>羽绒服</li>
														</ul>
														<ul class="clearfix" style="display: none;">
															<li>夹克</li>
															<li>羽绒服</li>
														</ul>
													</div>
												</div>
											</li>
											<li><span>服装</span></li>
											<li><span>服装</span></li>
											<li><span>服装</span></li>
											<li><span>服装</span></li>
										</ul>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"><span style="color:red;">*</span>商品名称：</label>
									<div class="layui-input-block">
										<input type="text" name="" required  lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">排序：</label>
									<div class="layui-input-block">
										<input type="text" name="" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
									</div>
									<div class="layui-form-mid layui-word-aux">排序默认为0，倒序排序，数字越大展示越靠前</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">券库存：</label>
									<div class="layui-input-block">
										<input type="text" name="" required  lay-verify="required" placeholder="请输入券库存数量" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"><span style="color:red;">*</span>商品图片：</label>
									<div class="layui-input-block addStoreMessage">
										<ul class="clearfix addStoreImg" id="demo2">
											<li class="uploadBtn"></li>
											<li>
												<img  src="../../../images/shouye/weixin.png"/>
												<span class="delStoreImg"></span>
											</li>
										</ul>
										<span>上传图片的最佳尺寸：1080像素*1080像素，其他尺寸会影响页效果，商品图片只可以上传1张，默认第一张为主图封面。</span>
									</div>
								</div>
							</form>
						</div>
					</div>
					<div class="propertyItem">
						<div class="info-title">商品属性</div>
						<div class="baseForm">
							<form class="layui-form" action="">
								<div class="layui-form-item">
									<label class="layui-form-label"><span style="color:red;">*</span>商品售价：</label>
									<div class="layui-input-inline">
										<input type="text" name="" required  lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
									</div>
									<div class="layui-form-mid layui-word-aux">元</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"><span style="color:red;">*</span>商品库存：</label>
									<div class="layui-input-inline">
										<input type="text" name="" required lay-verify="required" placeholder="请输入商品库存数量" autocomplete="off" class="layui-input">
									</div>
									<div class="layui-form-mid layui-word-aux">件</div>
								</div>
								<div class="layui-form-item storeList1" >
									<label class="layui-form-label">商品型号：</label>
									<div class="layui-input-inline">
										<input type="text" placeholder="添加商品型号"  class="layui-input model model1">
										<ul style="display: none;" class="storeModel storeModel1">
											<li>
												<span>颜色</span>
												<div class="modelDetail" style="display: block;">
													<div>
														<ul class="clearfix modelSize">
															<li>黑色</li>
															<li>红色</li>
															<li>白色</li>
														</ul>
														<ul class="clearfix">
															<li>编辑</li>
															<li class="">删除</li>
															<li>完成</li>
														</ul>
														<ul class="clearfix">
															<li>
																<input type="text" placeholder="请输入您要添加的商品属性" />
																<input type="button" value="添加" />
															</li>
														</ul>
													</div>
												</div>
											</li>
											<li>
												<span>尺码</span>
												<div class="modelDetail" style="display: none;">
													<div>
														<ul class="clearfix modelSize">
															<li>S/165</li>
															<li>M/170</li>
															<li>L/175</li>
															<li>XL/180</li>
															<li>2XL/185</li>
															<li>3XL/190</li>
														</ul>
														<ul class="clearfix">
															<li>夹克</li>
															<li>羽绒服</li>
														</ul>
													</div>
												</div>
											</li>
											<li><span>服装</span></li>
											<li><span>服装</span></li>
											<li><span>服装</span></li>
											<li><span>服装</span></li>
										</ul>
									</div>
									<span class="storeAddModel"></span>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label formRadio"><span style="color:red;">*</span>商品状态：</label>
									<div class="layui-input-block">
										<input type="radio" name="status" value="上架" title="上架">
										<input type="radio" name="status" value="放入仓库" title="放入仓库" checked>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"><span style="color:red;">*</span>商品描述：</label>
									<div class="layui-input-block addStoreMessage">
										<textarea id="editor_id" name="content" style="width:624px;height:300px;"></textarea>
										<span>字数统计：<a class="word_count1"></a></span>
									</div>
								</div>
							</form>
							<div class="btnList clearfix">
								<input type="button" value="取消" class="reset-btn"/>
								<input type="button" value="预览" class="view-btn" />
								<input type="button" value="确定" class="submit-btn" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
<script type="text/html" id="barDemo">
						<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">编辑</a>
	</script>
	<script src="../../../js/plugIn/jquery-3.3.1.min.js"></script>
	<script src="../../../layui/layui.all.js"></script>
	<script charset="utf-8" src="../../../plugin/kindeditor/kindeditor-all-min.js"></script>
	<script>
		var menuList = "shangpinguanli";
		var menuSec = "shangpinliebiao";
		$('header').load('../home.html');
		$('#menu').load('../menu.html');
		$(function(){
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
				var table = layui.table;
				var laydate = layui.laydate;
				var layer = layui.layer;
				var laypage  = layui.laypage ;
				var upload = layui.upload;
				var jquery = layui.jquery;
				//多图片上传
				upload.render({
					elem: '.uploadBtn'
					/* ,url: '/upload/' */
					,multiple: true
					,before: function(obj){
						//预读本地文件示例，不支持ie8
						console.log(obj);
						obj.preview(function(index, file, result){
							$('#demo2').append('<li><img  src="'+ result +'" alt="'+ file.name +'"/></li>');
							$('#demo2 li:gt(0)').each(function(){
								if($(this).find('span').size()<=0){
									$(this).append('<span class="delStoreImg"></span>');
								}
							})
						});
					}
					,done: function(res){
						//上传完毕
						
					}
				});
				
				//监听导航点击
				element.on('nav(demo)', function(elem){
					layer.msg("aaaaaaaaa");
					layer.msg(elem.text());
				});
				//自定义格式
				laydate.render({
					elem: '#publish'
					,type: 'datetime'
					,range: '到'
					,format: 'yyyy/M/d'
				});
				//展示已知数据
			table.render({
				elem: '#orderList'
				,cols: [[ ,//标题栏
						{type: 'checkbox'}
					,{field: 'id', title: '商品编号'}
					,{field: 'username', title: '商品信息' }
					,{field: 'email', title: '商品分类'}
					,{field: 'sign', title: '价格'}
					,{field: 'sex', title: '总库存' }
					,{field: 'sex', title: '总销量' }
					,{field: 'sex', title: '发布时间' }
					,{toolbar:'#barDemo',title: '操作',width:160}
				]]
				,data: [{
					"id": "10001"
					,"username": "杜甫"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "116"
					,"ip": "192.168.0.8"
					,"logins": "108"
					,"orderStatus": "待付款"
					,"edit":"0"
				}, {
					"id": "10002"
					,"username": "李白"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "12"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"joinTime": "2016-10-14"
					,"orderStatus": "待发货"
					,"edit":"0"
				}, {
					"id": "10003"
					,"username": "王勃"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "65"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "已完成"
					,"edit":"1"
				}, {
					"id": "10004"
					,"username": "贤心"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "666"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "已关闭"
					,"edit":"0"
				}, {
					"id": "10005"
					,"username": "贤心"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "86"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "待付款"
					,"edit":"0"
				}, {
					"id": "10006"
					,"username": "贤心"
					,"email": "xianxin@layui.com"
					,"sex": "男"
					,"city": "浙江杭州"
					,"sign": "人生恰似一场修行"
					,"experience": "12"
					,"ip": "192.168.0.8"
					,"logins": "106"
					,"orderStatus": "待付款"
					,"edit":"1"
				}]
				,even: true
				,page: true //是否显示分页
				,limits: [5, 10, 15]
				,limit: 10 //每页默认显示的数
				,id:"testReload"
				//,skin: 'line' //表格风格
				,done:function(res, curr, count){//数据,页码,数据总量
					//alert(111);
					
				}
			});
			/* 富文本编辑器 */
			KindEditor.ready(function(K) {
					K.create('#editor_id',{
						afterChange : function() {
						K('.word_count1').html(this.count());
						K('.word_count2').html(this.count('text'));
					}
					});
			});
			/* // 取得HTML内容
			html = $("#editor_id").html();

			// 同步数据后可以直接取得textarea的value
			editor.sync();
			html = document.getElementById('editor_id').value; // 原生API
			html = K('#editor_id').val(); // KindEditor Node API
			html = $('#editor_id').val(); // jQuery

			// 设置HTML内容
			editor.html('HTML内容'); */
			
			var $ = layui.$, active = {
				all: function(){
					//执行重载
					 table.reload('testReload', {
						page: {
							curr: 1 //重新从第 1 页开始
						}
						,where: {
							key: {
								id: "111"
							}
						}
					}); 
				}
			};
			
			$('#storeBtn a').on('click', function(){
				var type = $(this).data('type');
				console.log(type);
				active[type] ? active[type].call(this) : '';
			});
  
			//监听行工具事件
			table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				if(layEvent === 'detail'){
					if(data.orderStatus){
						window.open("obligation.html?status="+data.orderStatus);
					}
					
				} else if(layEvent === 'del'){
					layer.confirm('真的删除行么', function(index){
						obj.del(); //删除对应行（tr）的DOM结构
						layer.close(index);
						//向服务端发送删除指令
					});
				} else if(layEvent === 'edit'){
					layer.msg('编辑操作');
				}
			});
			/* 删除上传图片操作 */
			$(document).on('click','.delStoreImg',function(){
				$(this).parent().remove();
			});
			
			/* 商品分类下拉框 */
			$('.storeClassify li').mouseenter(function(){
				$(this).find('.storeDetail').css('display','block');
			});
			$('.storeClassify li').mouseleave(function(){
				$(this).find('.storeDetail').css('display','none');
			});
			$('.storefl').focus(function(){
				$('.storeClassify').css('display','block');
			}).blur(function(){
				$(".storeClassify").css("display", "none");
			})
			var storeClass = "";
			$('.clothesdetail li').mousedown(function(){
				$('.storefl').val($(this).html());
			});
			var count = 1;
			/* 商品型号下拉框 */
			$(document).on('mouseenter','.storeModel1 li',function(){
				$(this).find('.modelDetail').css('display','block');
			});
			$(document).on('mouseleave','.storeModel1 li',function(){
				$(this).find('.modelDetail').css('display','none');
			});
			$(document).on('focus','input.model',function(){
				$(this).next().css('display','block');
			})
			$(document).on('blur','input.model',function(){
				$('.storeModel').css('display','none');
			})
			$(document).on('mousedown','.modelSize li',function(){
				$(this).parents('.storeModel').prev().val($(this).parents("li").find('span').html()+'-'+$(this).html());
			})
			$('.modelSize li').mousedown(function(){
				
			});
			
			/* 点击添加商品型号输入框 */
			$(document).on('click','.storeAddModel',function(){
				count++;
				var storeListCont = $('.storeList1').html();
				console.log(storeListCont);
				$('.storeList1').after("<div class='layui-form-item storeList"+count+"'>"+storeListCont+"</div>");
				$('.storeList'+count).removeClass('storeModel1');
				$('.storeList'+count).addClass('storeModel'+count);
			})
		})
		
		
		//监听表格复选框选择
		/* table.on('checkbox(demo)', function(obj){
			console.log(obj)
		}); */
		
		
	</script>
</html>